<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>测试 - layui</title>
  <link rel="stylesheet" href="layui/css/layui.css">
  <link rel="stylesheet" href="css/cunjgy.css" />
  <link rel="stylesheet" href="css/flex.css" />

</head>

<body>
  <div class="container">
    <div class="top">
      一村九园可视化管理市级平台
    </div>
    <div class="box s-b">
      <div class="box_left">
        <!-- 环境监测顶部标题 -->
        <div class="aj-c">
          <div class="left_xzzc aj-c">环境监测</div>
        </div>


        <div class="aj-c mb-40 ">
          <div class="mt-30 flex s-b  w-485">
            <div class="qihoubox">
              <div class="aj-c qihounum   ">32°C</div>
              <div class="aj-c qihoutitle">空气温度</div>
            </div>
            <div class="qihoubox  ">
              <div class="aj-c qihounum   ">40%</div>
              <div class="aj-c qihoutitle">空气湿度</div>
            </div>
            <div class="qihoubox  ">
              <div class="aj-c qihounum  ">20000lx</div>
              <div class="aj-c qihoutitle">光照强度</div>
            </div>
            <div class="qihoubox  ">
              <div class="aj-c qihounum  ">25mm</div>
              <div class="aj-c qihoutitle">降雨量</div>
            </div>
            <div class="qihoubox  ">
              <div class="aj-c qihounum ">5/s</div>
              <div class="aj-c qihoutitle">风速</div>
            </div>
            <div class="qihoubox  ">
              <div class="aj-c qihounum ">1000 <span style="font-size: 11px;">hpa</span></div>
              <div class="aj-c qihoutitle">气压</div>
            </div>
          </div>
        </div>
        <div class="aj-c   mb-30">
          <div class="left_xzzc aj-c">销售数据</div>
        </div>
        <!-- 销售数据的echarts -->
        <div class="xzzc_bottom_e mt-30">

        </div>
        <!-- 库存标题 -->
        <div class="aj-c mt-40">
          <div class="left_xzzc aj-c">库存</div>
        </div>
        <div class="mt-30 s-b">
          <div class="leidatu"></div>
          <div class="leidalist">
            <div class="flex   aj-c box_right_top_list_item">
              <div class="flex " style="flex:6;  ">
                <!-- mr-36 -->
                <div class="yjtitle  flex ">
                  <div style="  margin-right: 3px;  " class="line-clamp1 ">苹果</div>
                  <div class="line-clamp1 ">156斤</div>
                </div>
              </div>
              <div class="yjicon line-clamp1" style="flex:1;  "></div>
              <div class="border_num line-clamp1 " style="text-align: end;flex: 4; ">￥211.5w</div>

            </div>
            <div class="flex   aj-c box_right_top_list_item">
              <div class="flex " style="flex:6;  ">
                <!-- mr-36 -->
                <div class="yjtitle  flex">
                  <div style="  margin-right: 3px;  " class="line-clamp1">桃子</div>
                  <div class="line-clamp1">156斤</div>
                </div>
              </div>
              <div class="yjicon" style="flex:1;  "></div>
              <div class="border_num line-clamp1" style="text-align: end;flex: 4; ">￥211.5w</div>

            </div>
            <div class="flex   aj-c box_right_top_list_item">
              <div class="flex " style="flex:6;  ">
                <!-- mr-36 -->
                <div class="yjtitle  flex">
                  <div style="  margin-right: 3px;  " class="line-clamp1">火龙果</div>
                  <div class="line-clamp1">156斤</div>
                </div>
              </div>
              <div class="yjicon" style="flex:1;  "></div>
              <div class="border_num line-clamp1" style="text-align: end;flex: 4; ">￥211.5w</div>

            </div>
            <div class="flex   aj-c box_right_top_list_item">
              <div class="flex " style="flex:6;  ">
                <!-- mr-36 -->
                <div class="yjtitle  flex">
                  <div style="  margin-right: 3px;  ">大枣</div>
                  <div>156斤</div>
                </div>
              </div>
              <div class="yjicon" style="flex:1;  "></div>
              <div class="border_num " style="text-align: end;flex: 4; ">￥211.5w</div>

            </div>
            <div class="flex   aj-c box_right_top_list_item">
              <div class="flex " style="flex:6;  ">
                <!-- mr-36 -->
                <div class="yjtitle  flex">
                  <div style="  margin-right: 3px;  ">杏</div>
                  <div>156斤</div>
                </div>
              </div>
              <div class="yjicon" style="flex:1;  "></div>
              <div class="border_num " style="text-align: end;flex: 4; ">￥211.5w</div>

            </div>
            <div class="flex   aj-c box_right_top_list_item">
              <div class="flex " style="flex:6;  ">
                <!-- mr-36 -->
                <div class="yjtitle  flex">
                  <div style="  margin-right: 3px;  ">葡萄</div>
                  <div>156斤</div>
                </div>
              </div>
              <div class="yjicon" style="flex:1;  "></div>
              <div class="border_num " style="text-align: end;flex: 4; ">￥.5w</div>

            </div>
            <div class="flex   aj-c box_right_top_list_item">
              <div class="flex " style="flex:6;  ">
                <!-- mr-36 -->
                <div class="yjtitle  flex">
                  <div style="  margin-right: 3px;  ">草莓</div>
                  <div>156斤</div>
                </div>
              </div>
              <div class="yjicon" style="flex:1;  "></div>
              <div class="border_num " style="text-align: end;flex: 4; ">￥21.5w</div>

            </div>
            <div class="flex   aj-c box_right_top_list_item">
              <div class="flex " style="flex:6;  ">
                <!-- mr-36 -->
                <div class="yjtitle  flex">
                  <div style="  margin-right: 3px;  ">梨</div>
                  <div>156斤</div>
                </div>
              </div>
              <div class="yjicon" style="flex:1;  "></div>
              <div class="border_num " style="text-align: end;flex: 4; ">￥1.5w</div>

            </div>



          </div>
        </div>

      </div>
      <div class="box_center">
        <!-- 地图区域 -->
        <div class="box_center_top ">
          <div class="aj-c mt-50 top_title"
            style="text-shadow: 0 0 18px #6dc8e7, 0 0 16px #6dc8e7, 0 0 11px #6dc8e7, 0 0 3px #6dc8e7;">累计销售总额</div>
          <div class="mb-21 mt-20 aj-c num_mony">
         
          </div>
          <div class="s-b">
            <div class="box_center_top_box">
              <div class="box_center_top_left aj-c mb-62">
                <div class="">
                  <div class="aj-c num">250104m²</div>
                  <div class="aj-c title">面积</div>
                </div>
              </div>
              <div class="box_center_top_left aj-c mb-62">
                <div class="">
                  <div class="aj-c num">53</div>
                  <div class="aj-c title">数量设备</div>
                </div>
              </div>
              <div class="box_center_top_left aj-c  ">
                <div class="">
                  <div class="aj-c num">2333</div>
                  <div class="aj-c title">员工数量</div>
                </div>
              </div>
            </div>
            <!-- 地图echarts -->
            <div class="maps">

            </div>
            <div class="box_center_top_box">
              <div class="box_center_top_left aj-c mb-20">
                <div class="">
                  <div class="aj-c num">1503kg</div>
                  <div class="aj-c title">预计产量</div>
                </div>
              </div>
              <div class="box_center_top_left aj-c mb-20">
                <div class="">
                  <div class="aj-c num">1.5w</div>
                  <div class="aj-c title">投入成本</div>
                </div>
              </div>
              <div class="box_center_top_left aj-c mb-20">
                <div class="">
                  <div class="aj-c num">50w</div>
                  <div class="aj-c title">预计收益</div>
                </div>
              </div>
              <div class="box_center_top_left aj-c  ">
                <div class="">
                  <div class="aj-c num">200</div>
                  <div class="aj-c title">销售订单数</div>
                </div>
              </div>

            </div>
          </div>
          <!-- 温度湿度光照强度等 -->
          <div class=" flex aj-c ">
            <div class="qihoubox   mr-30">
              <div class="aj-c qihounum mt-10  mb-3">32 <div class="sheshidu">°C</div>
              </div>
              <div class="aj-c qihoutitle">土壤温度</div>
            </div>
            <div class="qihoubox    mr-30">
              <div class="aj-c qihounum mt-10  mb-3">40<div class="sheshidu">%</div>
              </div>
              <div class="aj-c qihoutitle">土壤湿度</div>
            </div>
            <div class="qihoubox    mr-30">

              <div class="aj-c qihounum mt-10  mb-3">7.0</div>
              <div class="aj-c qihoutitle">土壤水分</div>
            </div>
            <div class="qihoubox    mr-30">

              <div class="aj-c qihounum mt-10  mb-3">6.5</div>
              <div class="aj-c qihoutitle">土壤pH</div>
            </div>
          </div>
        </div>
        <!--   -->
        <div class="box_center_center mt-20">
          <div class="flex aj-c">
            <div class="nqyj aj-c">农情预警</div>

          </div>
          <div class="boix-tab">
            <div class="flex s-b h-38 mt-10" style="color: #A5B6D3;">
              <div class="aj-c" style=" width: 20%;">预警时间</div>
              <div class="aj-c" style=" width: 20%;">设备名称</div>
              <div class="aj-c" style=" width: 20%;">正常参数范围</div>
              <div class="aj-c" style=" width: 20%;">当前参数</div>
            </div>
            <div class="flex s-b h-38 boix-tab_active">
              <div class="aj-c" style=" width: 20%;">2022-04-12</div>
              <div class="aj-c" style=" width: 20%;">气象站</div>
              <div class="aj-c" style=" width: 20%;">10~50</div>
              <div class="aj-c" style=" width: 20%;">80</div>
            </div>
            <div class="flex s-b h-38  ">
              <div class="aj-c" style=" width: 20%;">2022-04-12</div>

              <div class="aj-c" style=" width: 20%;">气象站</div>
              <div class="aj-c" style=" width: 20%;">10~50</div>
              <div class="aj-c" style=" width: 20%;">80</div>
            </div>
            <div class="flex s-b h-38 boix-tab_active">
              <div class="aj-c" style=" width: 20%;">2022-04-12</div>

              <div class="aj-c" style=" width: 20%;">气象站</div>
              <div class="aj-c" style=" width: 20%;">10~50</div>
              <div class="aj-c" style=" width: 20%;">80</div>
            </div>
            <div class="flex s-b h-38  ">
              <div class="aj-c" style=" width: 20%;">2022-04-12</div>

              <div class="aj-c" style=" width: 20%;">气象站</div>
              <div class="aj-c" style=" width: 20%;">10~50</div>
              <div class="aj-c" style=" width: 20%;">80</div>
            </div>
          </div>
        </div>
        <!-- tab切换区域 -->
        <div class="j-c ml-75">
          <div class="box_center_bottom_item flex">
            <div class="bottom_item_bg aj-c xc" onclick="tabs('xc')">数字乡村</div>
            <div class="bottom_item_bg aj-c gy" onclick="tabs('gy')">数字果园</div>
            <div class="bottom_item_bg aj-c cy" onclick="tabs('cy')">数字菜园</div>
          </div>
        </div>


      </div>
      <div class="box_right">
        <div class="gyjj flex">
          <div class="shipjk mr-20">
            <img src="/image/num_xc/ship.jpg" alt="">
            <div class="flex">
              <div class="spflex aj-c">视频监控</div>
              <div class="spflex aj-c">图片</div>
            </div>
          </div>
          <div class="gyjjvalue">
            <div class=" mb-15 mt-7">果园简介</div>
            <div class="line-clamp6">
              如果是秋天来到伊宁，一定要到市区西郊的汉宾果园和南郊的塔西库勒克果园去，这两个地方被称为“伊宁的迎宾园”。你可以亲手从硕果累累的枝头摘下苹果、葡萄、杏子，现摘现吃，哪儿也吃不到这样新鲜味美的水果。</div>
          </div>
        </div>

        <div class="aj-c mt-28">
          <div class="left_xzzc aj-c">支出收入</div>
        </div>

        <!-- 支出收入echarts -->
        <div class="mt-31 zhichusr">

        </div>
        <div class="aj-c mt-32">
          <div class="left_xzzc aj-c">产量</div>
        </div>
        <div class="mt-30 chanl">
          qwqsdas
        </div>
      </div>
    </div>
  </div>
  <script src="js/jquery-3.4.1.min.js"></script>
  <script src="js/flexible.js"></script>
  <script src="js/echarts.min.js"></script>
  <script type="text/javascript" src="js/echarts-gl.min.js"></script>
  <script type="text/javascript" src="js/geoCitys.js"></script>
  <!-- 先引入jquery -->
  <script src="layui/layui.js"></script>
  <script src="js/cunjigy.js"></script>

  <script>
    (function () {
      document.getElementsByClassName('xc')[0].className = 'bottom_item_bg aj-c xc';
      document.getElementsByClassName('cy')[0].className = 'bottom_item_bg aj-c cy';
      document.getElementsByClassName('gy')[0].className = 'bottom_item_bg aj-c gy box_center_bottom_item_active'
      // document.getElementsByClassName('yds')[0].className = 'aj-c  mr-30 yds yds_item_active';

    })();

    // 还可以加参数，进行更优雅的做法
    let num = 456461654999;
    const options = {
      style: 'currency',
      currency: 'CNY',
    };
    var mony = (num).toLocaleString('zh-CN', options); // ¥999,999.00

    mony = mony.slice(1);
    mony = mony.split('')
    mony.forEach(element => {
      document.querySelector('.num_mony').innerHTML += ` <div class="box_center_top_nums aj-c">${element}</div>`
    });

    document.querySelectorAll('.box_center_top_nums').forEach(item => {
      if (item.innerHTML == ',' || item.innerHTML == '.') {
        console.log(item)
        item.className = 'aj-c dou';
      }
      if (item.innerHTML == '.') {
        item.className = 'aj-c dian';
      }
    });
    function tabs(value) {
      switch (value) {
        case 'cy':
          document.getElementsByClassName('cy')[0].className = 'bottom_item_bg aj-c xc box_center_bottom_item_active';
          document.getElementsByClassName('gy')[0].className = 'bottom_item_bg aj-c cy '
          document.getElementsByClassName('xc')[0].className = 'bottom_item_bg aj-c cy'
          window.location.href = './cunjicy.html'

          break;
        case 'gy':
          document.getElementsByClassName('cy')[0].className = 'bottom_item_bg aj-c xc  ';
          document.getElementsByClassName('gy')[0].className = 'bottom_item_bg aj-c cy box_center_bottom_item_active'
          document.getElementsByClassName('xc')[0].className = 'bottom_item_bg aj-c cy'
          window.location.href = './cunjigy.html'

          break;
        case 'xc':
          document.getElementsByClassName('cy')[0].className = 'bottom_item_bg aj-c xc ';
          document.getElementsByClassName('gy')[0].className = 'bottom_item_bg aj-c cy '
          document.getElementsByClassName('xc')[0].className = 'bottom_item_bg aj-c cy box_center_bottom_item_active'
          window.location.href = './cunjixc.html'
          break;

        default:
          break;
      }
    }

    // 月度
    function ydsbox(value) {
      console.log(value, 'value')
      switch (value) {
        case 'yds':
          document.getElementsByClassName('yds')[0].className = 'aj-c  mr-30 yds yds_item_active';

          document.getElementsByClassName('jss')[0].className = 'aj-c  mr-30 jss '
          document.getElementsByClassName('nds')[0].className = 'aj-c  mr-30 nds'

          break;
        case 'jss':
          document.getElementsByClassName('yds')[0].className = 'aj-c  mr-30 yds';
          document.getElementsByClassName('jss')[0].className = 'aj-c  mr-30 jss yds_item_active'
          document.getElementsByClassName('nds')[0].className = 'aj-c  mr-30 nds'

          break;
        case 'nds':
          document.getElementsByClassName('yds')[0].className = 'aj-c  mr-30 yds';
          document.getElementsByClassName('jss')[0].className = 'aj-c  mr-30 jss  '
          document.getElementsByClassName('nds')[0].className = 'aj-c  mr-30 nds yds_item_active'

          break;

        default:
          break;
      }

    }
    // 季度

  </script>



  <!-- 引入 layui.js 的 <script> 标签最好放置在 html 末尾 -->

  <script>
    // 销售数据的echarts "桃子", "梨子", "苹果", "草莓"

    xzzc_bottom_e([120, 132, 101, 134, 90, 230, 210, 182, 191, 234, 290, 330], [120, 182, 191, 234, 390, 230, 110, 201, 254, 390, 130, 210], [120, 282, 591, 134, 690, 830, 910, 401, 154, 290, 130, 210], [120, 282, 191, 134, 590, 630, 210, 801, 254, 190, 230, 210]);
    // 库存value  max最大值
    leidatu(["1200", "1000", "800", "1270", "1365", "1350", "1365", "1350"], [2000, 3000, 5000, 4000, 5600, 8000, 4000, 2000])
    // 支出收入
    zhichusr()
    // 产量
    chanl()
    // 地图
    maps()
  </script>
</body>

</html>